<template>
	<el-drawer title="配置角色" :visible.sync="visible" size="360px">
		<el-scrollbar class="config_role_form" v-loading="loading">
			<div class="item" v-for="(item, index) in roleGroupData" :key="index">
				<h4>{{ item.label }}</h4>
				<el-checkbox-group v-model="item.checked">
					<el-checkbox v-for="(n, i) in item.children" :key="i" :label="n.id">{{ n.name }}</el-checkbox>
				</el-checkbox-group>
			</div>
		</el-scrollbar>
		<div class="config_user_btn">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" :loading="btnLoading" @click="handleSubmitRole">确定</el-button>
		</div>
	</el-drawer>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import { getRoleList } from '@/api/system/tbSysRole';
import { getRoleByUser, updateUserRole } from '@/api/system/tbSysUser';
export default {
	props: {
		value: { type: Boolean, default: false },
		dataId: { type: String, default: '' }
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			roleListData: [],
			roleGroupData: [],
			btnLoading: false,
			originalChecked: []
		};
	},
	computed: { ...mapGetters(['dictEnums']) },
	watch: {
		value(flag) {
			this.visible = flag;
		},
		async visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.loading = true;
			await this.getRoleData();
			await this.getCheckedRole();
			this.loading = false;
		},
		originalChecked(arr) {
			this.roleGroupData = this.dictEnums['ROLE_TYPE'].map((item) => {
				let children = this.roleListData.filter((n) => n.type === item.value);
				let checkeds = arr.filter((n) => n.type === item.value).map((n) => n.id);
				return { label: item.msg, value: item.value, checked: checkeds, children };
			});
		}
	},
	methods: {
		//获取角色数据
		async getRoleData() {
			let params = { page: 1, limit: 9999 };
			let result = await getRoleList(params).then((res) => res.data);
			if (result.code === '0') {
				this.roleListData = result.data || [];
			}
		},

		//获取选中角色
		async getCheckedRole() {
			let result = await getRoleByUser(this.dataId).then((res) => res.data);
			if (result.code === '0') {
				this.originalChecked = result.data || [];
			}
		},

		//提交
		handleSubmitRole() {
			let params = { userId: this.dataId };
			let curChecked = this.roleGroupData.reduce((prev, cur) => {
				return [...prev, ...cur.checked];
			}, []);
			let originalChecked = this.originalChecked.map((item) => item.id);
			let diffChecked = this.$getArrDifference(curChecked, originalChecked);
			params['roleList'] = diffChecked.map((item) => {
				let operType = originalChecked.includes(item) ? '2' : '1';
				return { relId: item, operType };
			});
			this.btnLoading = true;
			this.updateSelectedRole(params);
		},

		//更新选中角色
		async updateSelectedRole(params) {
			let result = await updateUserRole(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.visible = false;
				this.$showCustomMessage('success', `更新选中角色成功`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.config_role_form {
	flex: 1;
	padding: 8px 0;
	.item {
		padding: 8px 16px;
	}
	.item h4 {
		margin-bottom: 4px;
	}
	.el-checkbox {
		display: flex;
		padding: 8px 0;
		margin-right: 0;
	}
}
.config_user_btn {
	padding: 16px;
	text-align: right;
	border-top: solid 1px #e4e7ed;
}
</style>
